<template>
	<view class="page container">
		<view class="search-form">
			<view class="datetime-picker">
				<uni-datetime-picker v-model="search.beginDate" type="date" placeholder="选择开始日期搜索" />
				<uni-datetime-picker v-model="search.endDate" type="date" placeholder="选择结束日期搜索" />
			</view>
			<view class="search_customer">
				<uni-search-bar class="search-bar" v-model="search.customerName" placeholder="输入客户" clearButton="auto" cancelButton="none" />
				<uni-search-bar class="search-bar" v-model="search.isDebt" placeholder="输入类型" clearButton="auto" cancelButton="none" />
				<button @click="fetchBills">搜索</button>
				<button @click="showModal">新增</button>
			</view>

		</view>
		<view class="billtable">
			<view v-for="(item, index) in bills" :key="index" class="bill-item">
				<text class="type">{{ item.type }}</text>
				<view class="top_bottom">
					<view class="top-column">
						<text class="customer-name">{{ item.customerName }}</text>
						<text class="mobile">{{ item.mobile }}</text>
					</view>
					<view class="bottom-column">
						<text class="event-time">{{ formatDate(item.eventTime) }}</text>
						<text class="amount">{{ item.isDebt }}</text>
					</view>
				</view>
				<view class="actions">
					<!-- <navigator url="/pages/tabbar/bill/billForm/billForm?id=item.id" data-item="{{item}}" hover-class="navigator-hover"> -->
					<!-- <button  class="detail-button">详情</button> -->
					<!-- </navigator> -->
					<button class="detail-button" @click="showModal(item)">详情</button>
					<button class="delete-button" @click="confirmDelete(item)">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalVisible: false, // 控制模态对话框的显示隐藏
				bills: [], // 用于存储从接口获取的账单数据
				search: {
					beginDate: this.getTodayDate(),
					endDate: "",
					customerName: '',
					isDebt:''
				}
			}
		},
		methods: {
			getTodayDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1
				const day = String(today.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			fetchBills() {
				uni.request({
					url: "http://106.14.247.216:8888/drugStore/bill/list",
					method: 'POST',
					data: {
						"beginDate": this.search.beginDate,
						"endDate": this.search.endDate,
						"customerName": this.search.customerName,
						"isDebt": this.search.isDebt
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							this.bills = res.data.data.list; // 假设res.data直接就是账单数组
						} else {
							console.error('获取账单列表失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			deleteBill(item) {
				uni.request({
					url: `http://106.14.247.216:8888/drugStore/bill/delete?id=${item.billId}`, // 使用模板字符串将参数附加到 URL 中
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							console.log('删除成功:', res);
							this.fetchBills(); // 重新获取账单列表
						} else {
							console.error('删除失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			confirmDelete(item) {
				console.log(item)
				uni.showModal({
					title: '确认删除',
					content: '您确定要删除这条记录吗？',
					success: (res) => {
						if (res.confirm) {
							this.deleteBill(item);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			formatDate(date) {
				if (date) {
					const dateObj = new Date(date);
					const year = dateObj.getFullYear();
					const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1
					const day = String(dateObj.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				}
				return ''; // 如果日期为空或无效，则返回空字符串
			},
			showModal(item) {
				if (item) {
					uni.navigateTo({
						url: `/pages/tabbar/bill/billForm/billForm?id=${item.billId}`,
					})
				} else {
					uni.navigateTo({
						url: `/pages/tabbar/bill/billForm/billForm`,
					})
				}
			},
		},
		mounted() {
			this.fetchBills();
			uni.$on('update', (data) => {
				console.log("页面更新")
				this.fetchBills();
			})

		},

	}
</script>

<style>
	.search-form {
		display: flex;
		flex-direction: column;
		padding: 15rpx;
		margin-bottom: 3px;
		background-color: #f7f7f7;
	}
	
	.datetime-picker{
		display: flex;
		justify-content: space-evenly;
	}

	.search_customer {
		margin-top: 2px;
		display: flex; 
		justify-content: space-around;
		align-items: center;
	}
	.search-bar{
	    background-color: white;
	}

	.search_customer button {
		height: 40px;
		width: 90px;
		line-height: 40px;
		background-color: #5cb85c;
		color: white;
		border-radius: 8px;
		text-align: center;
		font-size: 14px;
		padding: 10px,10px,10px,10px;

	}

	/* 表格容器样式 */
	.billtable {
		width: 100%;
	}

	/* 单个账单项样式 */
	.bill-item {
		display: flex;
		padding: 20rpx 12rpx;
		border: 2px solid #ebebeb;
	}

	/* 账单类型图标或样式指示器 */
	.bill-item .type {
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		background-color: #5cb85c;
		border-radius: 50%;
		font-size: 18px;
		color: white;
		margin-right: 6px;
	}

	.bill-item .top_bottom {
		flex: 4;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.bill-item .actions {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
	}

	.top-column {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.bottom-column {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	/* 时间、客户名、金额等通用文本样式 */
	.bill-item text {
		font-size: 18px;
		color: #333;
	}

	/* 客户名称样式，假设需要强调 */
	.bill-item .customer-name {
		color: #555;
		font-size: 24px;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.bill-item .mobile {
		font-size: 20px;
		margin: auto;
	}

	/* 金额样式，假设需要突出显示 */
	.bill-item .amount {
		font-weight: bold;
		color: #d9534f;
		font-size: 20px;
	}

	/* 按钮样式 */
	.bill-item .detail-button {
		margin-bottom: auto;
		height: 30px;
		width: 70px;
		text-align: center;
		line-height: 30px;
		background-color: #5cb85c;
		color: white;
		border-radius: 8px;
		font-size: 18px;
		cursor: pointer;
	}

	/* 按钮样式 */
	.bill-item .delete-button {
		height: 30px;
		width: 70px;
		text-align: center;
		line-height: 30px;
		color: white;
		border-radius: 8px;
		font-size: 18px;
		cursor: pointer;
		background-color: #d90000;
	}
</style>